<template>
  <div>
    <el-form :model="searchDto" inline>
      <el-form-item label="关键字">
        <el-input v-model="searchDto.keyWord"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select
            v-model="searchDto.state"
            placeholder="选择状态">
          <el-option label="启用" value="0"/>
          <el-option label="冻结" value="1"/>
          <el-option label="注销" value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="性别">
        <el-select
            v-model="searchDto.gender"
            placeholder="选择性别">
          <el-option label="男" value="0"/>
          <el-option label="女" value="1"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getMembersFun">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-table :data="userList" border>
      <el-table-column label="用户头像">
        <template #default="scope">
          <el-avatar shape="square" :size="50" :src="$imgBaseUrl+scope.row.avatar"/>
        </template>
      </el-table-column>
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="用户名" prop="userName"></el-table-column>
      <el-table-column label="手机号" prop="phone"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column label="性别">
        <template #default="scope">
          <el-text v-if="scope.row.gender===0" type="primary"> 男</el-text>
          <el-text v-else type="success"> 女</el-text>
        </template>
      </el-table-column>
      <el-table-column label="出生日期" prop="birthDay"></el-table-column>
      <el-table-column label="状态">
        <template #default="scope">
          <el-text v-if="scope.row.state===0">启用</el-text>
          <el-text v-if="scope.row.state===1">冻结</el-text>
          <el-text v-if="scope.row.state===2">注销</el-text>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-text @click="openModify(scope.row.id)">修改</el-text>
          <el-divider direction="vertical"/>
          <el-text>删除</el-text>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="pagination">
    记录：{{ searchDto.total }}
    <el-divider direction="vertical"/>
    <el-pagination background layout="prev, pager, next" v-model:current-page="searchDto.pageNum"
                   v-model:page-size="searchDto.pageSize" :total="searchDto.total"/>
  </div>

  <el-dialog
      v-model="modifyDialog"
      title="修改"
      width="500"
  >
    <div>
      <el-form :model="selectUser" label-width="80">
        <el-form-item label="用户名">
          <el-input v-model="selectUser.userName"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="selectUser.gender">
            <!--          TODO  注意elementplus的版本，后续次写法可能被移除-->
            <el-radio-button label="0">男</el-radio-button>
            <el-radio-button label="1">女</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="selectUser.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="selectUser.email"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="selectUser.state">
            <!--          TODO  注意elementplus的版本，后续次写法可能被移除-->
            <el-radio-button label="0">启用</el-radio-button>
            <el-radio-button label="1">冻结</el-radio-button>
            <el-radio-button label="2">注销</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="modifyDialog = false">取消</el-button>
        <el-button type="primary" @click="submitModify">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, reactive, ref, watch} from 'vue'
import {getMembers, getMember, modifyMember} from '@/api/home/user/member'

let modifyDialog = ref(false)
let searchDto = reactive({
  pageNum: 1,
  pageSize: 10,
  keyWord: '',
  state: '',
  gender: '',
  total: 0,
})
let selectUser = ref({})
let userList = ref([])

function getMembersFun() {
  getMembers(searchDto).then(res => {
    userList.value = res.data.records
    searchDto.total = res.data.total - 0
  })
}

function openModify(userId) {
  getMember(userId).then(res => {
    selectUser.value = res.data
    modifyDialog.value = true
  })
}

function submitModify() {
  modifyMember(selectUser.value).then(() => {
    getMembersFun()
  })
  modifyDialog.value = false
}

onMounted(() => {
  getMembersFun()
})

watch(() => searchDto.pageNum, () => {
  getMembersFun()
})
</script>

<style scoped>

</style>
